<html>

<head>
    <title>grapecity_spreadJS_demo</title>
    <script src="jquery_3.1.1.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="gc.spread.sheets.excel2013white.14.2.2.css" type="text/css">
    <script src="gc.spread.sheets.all.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.excelio.14.2.2.min.js" type="text/javascript"></script>
    <script src="https://cdn.grapecity.com.cn/spreadjs/scripts/FileSaver.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.resources.zh.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.print.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.pdf.14.2.2.min.js" type="text/javascript"></script>
    <script src="gc.spread.sheets.charts.14.2.2.min.js" type="text/javascript"></script>
    <script src="v14.js" type="text/javascript"></script>
    <style type="text/css">
        #ss {
            height: 400px;
            width: 100%
        }
        p{
            color: #336699;
            text-align: center;
        }
        .button{
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <p>单元格设置图片后导出到Excel</p>
    <input type="button" id="saveExcel" value="export" class="button">
    <div id="ss"></div>
    <script type="text/javascript">
        GC.Spread.Common.CultureManager.culture('zh-cn');
        
        $(document).ready(function() {
            var picture = 'data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAlCAIAAABK/LdUAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAKWSURBVFhH7ZX7T5JRGMf9v1przZZdt66T1DDnWlNnkYvyMkHUZvNCmoWJiOQQoeUFzVJwEVoaLi+zqExns5qXFBTLJATXkzyzt+flvGOzH/zh/ez7C+f5fs/Le97znBMjIiKy6/nlDwy9cNdXdZRkG65frE6XlF5LrSqW62vLW/vso77lH+jbOcGNYJvpefIx1Yk9cpYksXmNmi7fCvOpP9f8MA/+EGBs6OOlMyVkdpYS4xS2Dhcmt1hdWXN0D6tVpqRDiqoiM46ycPaMkBmj0UND77c5b3/vWGVhc0Jc/vZ4fGwuzhuR8deT21auTu/LVlyuLVc2Fcn1SYeVpCosV99bnJ2P5EAecYNMuh7Pog8dW18FFvDs/hxiY6ks34hJgrneRqygNyNTWP6XhVnv+SPRvihmCAkH/657WNZmJ9YiAX+F+PnKz7xv0dsxwGXCPUOsF44XYo1NbrqGpECn9t7ISbvX3T44P+tBHx+njW5L2NBYY/O0dYCklDLt4sIylgWAc4Qka8pasMYG+oykjNpurLH4NDkL3SOTqkkyL6MGHWweaLpIqqG6E2uEqQ9fWoyOK9IKEuBq2bOKbgb8LQYdjDUu0LzEF1HCr1h3u5344SjAGqHgah2xslShbFr7vo4xDvCdiBNkNfdhmTDqmiBWAUFfP2p8Bof4zPS8e2z6ScvLzMRy4gHJktU4O59gMAS3CQmkniy+c9OSlVJJxqMRnMsCF9MfVFm6sFV6tEBf3Tk8+D4UCsH4Zmgz+tUOK+Nc6dzXpfC0TCbffdaq22CV/OsBHOLQanTwFyCiDHcfBwIbGNsJ3iWfpcHO78uw0uJv6Sqt0FTo/o/AVeDqd8MdBDvFZn014BiHjYM1ERGR3U1MzG/dmjY5fcSQGwAAAABJRU5ErkJggg==';
            var excelIo = new GC.Spread.Excel.IO();
            var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {
                sheetCount: 3
            });
            var sheet = spread.getActiveSheet();
            var picture = sheet.pictures.add("f2", picture, 20, 20, 37, 37);
            picture.startRow(0);
            picture.startColumn(0);
            picture.startRowOffset(0);
            picture.startColumnOffset(0);
            picture.endRow(1);
            picture.endColumn(1);
            picture.endRowOffset(0);
            picture.endColumnOffset(0);
            picture.allowMove(false);
            //picture.fixedPosition(true);
            $("#saveExcel").click(function() {
                fileName = 'picture.xlsx';
        
                var json = spread.toJSON();
        
                // here is excel IO API
                excelIo.save(json, function(blob) {
                    saveAs(blob, fileName);
                }, function(e) {
                    // process error
                    console.log(e);
                });
        
            });
        
        });
    </script>
</body>

</html>